<template>
  <div class="pics">
    <header>
      <!-- 头部导航栏 -->
      <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
      <!-- 主题下的类型 -->
      <div class="theme" style="font-size: 5px">
        <span>{{ album_type }}</span
        ><span>·{{ album_power }}</span
        ><span>·{{ album_num }}张照片</span>
      </div>
    </header>

    <!-- 观看人数 -->
    <div class="watching"></div>

    <!-- 编辑相册描述 -->
    <div class="album_des">
      <img src="../../static/images/edit_icon.png" alt="" />
      <van-field
        v-model="album_msg"
        rows="4"
        autosize
        type="textarea"
        placeholder="在线编辑相册描述"
        class="field_con"
      />
    </div>
    <!-- 点赞喜欢人数 -->
    <div class="icon">
      <van-row type="flex">
        <van-col :span="8">
          <van-image
            width="1.5rem"
            height="1.5rem"
            fit="contain"
            :src="require('../../static/images/like_icon.png')"
            style="display: inline-block; vertical-align: middle"
          />
          <span style="display: inline-block">{{ album_like }}</span>
        </van-col>
        <van-col :span="8">
          <van-image
            width="1.5rem"
            height="1.5rem"
            fit="contain"
            :src="require('../../static/images/comment_icon.png')"
            style="display: inline-block; vertical-align: middle"
          />
          <span style="display: inline-block">{{ album_com }}</span>
        </van-col>
        <van-col :span="8"
          ><van-image
            width="1.5rem"
            height="1.5rem"
            fit="contain"
            :src="require('../../static/images/visit_icon.png')"
            style="display: inline-block; vertical-align: middle"
          />
          <span style="display: inline-block">{{ album_watch }}</span></van-col
        >
      </van-row>
    </div>
    <!-- 相片详情 -->
    <div class="pic_content" v-for="(pic_msg, index) in picList" :key="index" v-lazy="pic_msg">
      <!-- 标题月份 -->
      <van-row style="text-align: center; margin: 15px 0; font-size: 20px"
        ><van-col :span="24">{{ pic_msg.pic_date|newDate("YYYY-MM") }}</van-col></van-row
      >
      <!-- 标题第几天  -->
      <van-row
        ><van-col :span="24">
          <van-image
            width="2.5rem"
            height="1.5rem"
            fit="contain"
            :src="require('../../static/images/Couple_month_icon.png')"
            style="
              display: inline-block;
              vertical-align: middle;
              margin-right: 1.2%;
            "
          />
          <span style="display: inline-block">DAY{{ pic_msg.pic_date | newDate("DD  HH:mm:ss") }}</span>
        </van-col></van-row
      >
      <!-- 照片描述 -->
      <van-row style="margin: 10px 0">
        <van-col :span="24">
          <van-image
            round
            width="1.5rem"
            height="1.5rem"
            fit="contain"
            :src="require('../../static/images/portrait.png')"
            style="
              display: inline-block;
              vertical-align: middle;
              margin-right: 0.9%;
            "
          />
          <span style="display: inline-block">{{ pic_msg.pic_des }}</span>
        </van-col>
      </van-row>
      <!-- 照片详情 -->
      <van-row type="flex" gutter="20">
        <van-col :span="8" v-for="(pic_url, i) in pic_msg.pic_url" :key="i" v-lazy="pic_url">
          <van-image
            width="7rem"
            height="7rem"
            fit="cover"
            :src="pic_url"
            class="pic_img"
          />
        </van-col>
      </van-row>
    </div>

    <!-- 底部导航 -->
    <div class="menuBottom">
      <van-tabbar
        v-model="active"
        class="mainBottom"
        active-color="#ccc"
        inactive-color="#000"
      >
        <van-tabbar-item replace to="/">
          <span>编辑</span>
          <template #icon="props">
            <img :src="props.active ? icon.Editactive : icon.Editinactive" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/">
          <span>下载</span>
          <template #icon="props">
            <img
              :src="props.active ? icon.Downloadactive : icon.Downloadinactive"
            />
          </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/uploadPic">
          <span>上传</span>
          <template #icon="props">
            <img
              :src="props.active ? icon.Uploadactive : icon.Uploadinactive"
            />
          </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/" badge="3">
          <span>删除</span>
          <template #icon="props">
            <img
              :src="props.active ? icon.Deleteactive : icon.Deleteinactive"
            />
          </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/">
          <span>转移</span>
          <template #icon="props">
            <img :src="props.active ? icon.Shiftactive : icon.Shiftinactive" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      //存储对应相册名
      album_name: "123",
      // 相册详情的名字
      title: "",
      //相册类型
      album_type: "私密",
      //相册权限
      album_power: "公开",
      //相册数量
      album_num: "127",
      //获取相册描述内容
      album_msg: "",
      //喜欢人数
      album_like: "127",
      //评论人数
      album_com: "127",
      //观看人数
      album_watch: "127",
      //相片详情
      picList: [],

      //底部图标
      active: 0,
      icon: {
        Editactive: require("../../static/images/edit-icon.png"),
        Editinactive: require("../../static/images/edit-icon.png"),
        Downloadactive: require("../../static/images/download-icon.png"),
        Downloadinactive: require("../../static/images/download-icon.png"),
        Uploadactive: require("../../static/images/upload-icon.png"),
        Uploadinactive: require("../../static/images/upload-icon.png"),
        Deleteactive: require("../../static/images/delete-icon.png"),
        Deleteinactive: require("../../static/images/delete-icon.png"),
        Shiftactive: require("../../static/images/shift-icon.png"),
        Shiftinactive: require("../../static/images/shift-icon.png"),
      },
    };
  },
  async created() {
    //获取上一个组件发送过来的信息
    this.album_name = this.$route.query.album_name;
    const { data: res } = await this.request.post("/getAlbumId", {
      album_name: this.album_name,
    });
    this.$store.commit("getAlbumId", res[0].album_id);
    this.title = this.album_name;
    this.getPic();
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/album" });
    },
    async getPic() {
      const res = await this.request.get("/album/pic", {
        album_id: this.$store.state.album_id,
      });
      if (res.status !== 0) {
        return this.$toast("暂无多余数据");
      } else {
        this.picList = res.data;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.pics {
  width: 750rpx;
  height: 100%;
  margin: 0 auto;
  margin-bottom: 50px;
  header {
    position: relative;
    .theme {
      width: 50%;
      z-index: 1000;
      margin: 0 auto;
      position: absolute;
      left: 35%;
      top: 30px;
    }
  }
  .watching {
    width: 90%;
    margin: 0 auto;
    height: 45px;
    // background-color: pink;
  }

  .album_des {
    position: relative;

    img {
      position: absolute;
      top: 27.5%;
      left: 6.5%;
      width: 3.9%;
      z-index: 1;
    }
  }

  .album_des .van-cell {
    padding: 1.8%;

    /deep/ .van-field__control {
      padding: 5.1% 9%;
      box-sizing: border-box;
      height: 90px !important;
    }

    .pics[data-v-66795b5f] .album_des .van-field__control {
      background-color: rgb(255, 239, 201);
    }
  }

  /deep/.album_des .van-field__control {
    background-color: #ffefc9;
    border-radius: 5px;
  }
  .icon {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    font-size: 0.5em;
    font-weight: 600;

    img {
      height: auto;
    }
  }

  .pic_content {
    width: 90%;
    margin: 9% auto;
    font-size: 0.8em;
  }
  /deep/.pic_content .pic_img img {
    border-radius: 5px;
  }

  .menuBottom .van-tabbar,
  .menuBottom .van-tabbar-item--active {
    background-color: rgb(241, 191, 131);
  }
}
</style>